<template>
  <div>
    <el-button  class="compile" @click="dialogFormVisible = true" icon="el-icon-plus" type="primary">新增排班信息</el-button>
    <el-dialog title="排班编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="排班时间" :label-width="formLabelWidth">
          <Date></Date>
        </el-form-item>
        <el-form-item label="班次" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择排班班次">
            <el-option label="早班" value="shanghai"></el-option>
            <el-option label="晚班" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排班人员" :label-width="formLabelWidth">
          <div>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Date from '../../../components/back/hjw/date'
  const cityOptions = ['老大', '老二', '老三', '老四'];
  export default {
    name: "tan_add_work",
    components:{
      Date
    },
    data(){
      return{
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        activeName: 'first',

        //这是多选框的
        checkAll: false,
        checkedCities: ['老大', '老二'],
        cities: cityOptions,
        isIndeterminate: true,
      }
    },
    methods:{
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  }
</script>

<style scoped>

</style>
